<!DOCTYPE html>
<html>
<head>
	<title>css-grid</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		*{
			box-sizing: border-box;
		}
		.row:after{
			content: "";
			clear: both;
			display: block;
		}

		[class*="col-"]{
			float: left;
			padding: 15px;
		}

		.col-1{
			width: 8.33%
		}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}

		html{
			font-family: "Lucida Sans", sans-serif;
		}

		.header{
			background-color: #9933cc;
			color:white;
			padding: 15px;
			text-align: center;
		}

		.menu ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		.menu li
		{
			padding: 9px;
			background-color: #33b5e5;
			color: white;
   			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		}

		.menu li:hover{
			background-color: #0099cc;
		}

		.menu a{
			text-decoration: none;
			color: white;
			padding-left: 25px;
		}



	</style>
</head>
<body>
	<div class="header">
		Chania
	</div>

	<div class="menu col-3">
		<ul>
			<li><a href="#">The Flight</a></li>
			<li><a href="#">The City</a></li>
			<li><a href="#">The Island</a></li>
			<li><a href="#">The Food</a></li>
		</ul>
	</div>

	<div class="col-9">
		<h1>The City</h1>
		<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
		<p>Resize the browser window to see how the content respond to the resizing.</p>
	</div>
</body>
</html>